<template>
  <div v-if="items" class="filter-bar__wrapper">
    <div class="filter-bar-item-container">
      <div class="filter-bar-item-wrapper" v-for="(item, index) in items" :key="index">
        <a-button :class="itemSelectedIndex === index ? 'filter-item-selected' : ''" @click="buttonClick(item, index)">
          {{ item.title }}
        </a-button>
      </div>
    </div>
    <div>
      <a-range-picker
        :class="pickerSelected ? 'range-picker range-picker-selected' : 'range-picker'"
        :format="'YYYY-MM-DD'"
        :placeholder="['开始时间', '结束时间']"
        @change="onDateChange"
      />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
moment.locale('zh-cn')

export default {
  name: 'OrderSalesFilterBar',
  components: {},
  props: {
    items: {
      type: Array,
      required: false,
      default: () => {
        return [
          {
            key: 'ThreeMonth',
            title: '近3个月'
          },
          {
            key: 'SixMonth',
            title: '近6个月'
          },
          {
            key: 'SixMonth',
            title: '近一年'
          }
        ]
      }
    },

    dateFormat: {
      type: String,
      // default: 'YYYY-MM-DD HH:mm:ss',
      default: 'YYYY-MM-DD',
      required: false
    },

    dateRange: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    },

    dateRangeString: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    },

    selectedIndex: {
      type: Number,
      required: false,
      default: 0
    }
  },
  data() {
    return {
      itemSelectedIndex: 0,
      previousSelectedIndex: 0,
      pickerSelected: true
    }
  },

  watch: {
    itemSelectedIndex: {
      handler: function(newValue, oldValue) {
        this.$emit('update:selectedIndex', newValue)
      },
      deep: false, //是否开启深度监听
      immediate: true //是否第一次立即执行
    }
  },

  mounted() {
    this.buttonClick(this.items[2], 2)
  },

  methods: {
    buttonClick(item, index) {
      this.itemSelectedIndex = index
      this.$emit('itemClick', item, index)

      var date = []
      var dateString = []
      var beginTime = undefined
      var endTime = undefined
      var beginTimeString = undefined
      var endTimeString = undefined
      switch (index) {
        case 0:
          {
            // 获取当天的开始结束时间
            beginTime = moment()
              .startOf('month')
              .subtract(3, 'months')
            endTime = moment().endOf('month')
          }
          break
        case 1:
          {
            // 获取当天的开始结束时间
            beginTime = moment()
              .startOf('month')
              .subtract(6, 'months')
            endTime = moment().endOf('month')
          }
          break
        case 2:
          {
            // 获取当天的开始结束时间
            beginTime = moment()
              .startOf('month')
              .subtract(12, 'months')
            endTime = moment().endOf('month')
          }
          break

        default:
          break
      }

      beginTimeString = beginTime.format(this.dateFormat)
      endTimeString = endTime.format(this.dateFormat)

      date.push(beginTime)
      date.push(endTime)

      dateString.push(beginTimeString)
      dateString.push(endTimeString)

      this.updatedDate(date, dateString)
    },

    onDateChange: function(date, dateString) {
      this.pickerSelected = date.length > 0 ? true : false
      //时间选择器选中
      if (date && Array.isArray(date) && date.length > 0) {
        //记录按钮选中index
        this.previousSelectedIndex = this.itemSelectedIndex
        this.pickerSelected = true
        this.itemSelectedIndex = -1
        this.updatedDate(date, dateString)
      } else {
        //
        this.pickerSelected = false
        //还原上一次选中状态
        this.buttonClick(this.items[this.previousSelectedIndex], this.previousSelectedIndex)
      }
    },
    updatedDate(date, dateString) {
      this.$emit('update:dateRange', date)
      this.$emit('update:dateRangeString', dateString)

      const that = this
      this.$nextTick(() => {
        that.$emit('dateChange', date, dateString)
      })
    }
  }
}
</script>

<style scoped lang="less">
.filter-bar__wrapper {
  display: flex;
  padding: 16px 16px;
  align-items: center;
}

.filter-bar-item-container {
  display: flex;
}

.filter-item-selected {
  color: var(--r-primary-color);
  border-color: var(--r-primary-color);
}

.filter-item-selected {
  color: var(--r-primary-color);
  border-color: var(--r-primary-color);
}

.filter-bar-item-wrapper {
  margin: 8px 4px;
}
.range-picker {
  width: 256px;
}

.range-picker-selected {
  color: var(--r-primary-color);
  border-color: var(--r-primary-color);
}
</style>

